<template>
	<view class="main">
		<!-- 推荐页 -->
		<view class="container">
			<view class="recruit-top">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" bar-width="100" @change="change" :is-scroll="false" ></u-tabs-swiper>
				</view>
		</view>
		<!-- <view class="list_con"> -->
			<swiper class="list_con" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
				<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" 
					@scrolltolower="reachBottom"
					@scroll="getscroll">
						<recruitList :listData="listData[index]">
							<u-loadmore :status="loadStatus[index]" @loadmore="getDataList(current)" />
						</recruitList>
					</scroll-view>
				</swiper-item>
			</swiper>
<!-- <u-back-top :scroll-top="scrollTop" top="600"></u-back-top> -->
	<view class="refresh " :class="{refresh_btn:scrollTop}" @click="refresh">
		刷新
	</view>
		<!-- </view> -->
	</view>
</template>

<script>
import recruitList from '@/components/recruitList/recruitList.vue';
export default {
	data() {
		return {
			
			scrollTop:false,
			// 切换标签
			list: [
				{
					name: '推荐招募'
				},
				{
					name: '演员招募'
				},
				{
					name: '摊位招募'
				}
			],
			// 当前选中标签
			listData: [[], [], []],
			page: [1, 1, 1],
			ticketInfos: [],
			current: 0,
			swiperCurrent:0,
			url: ['/comic-time/getRecruitByTime', '/comic-time/getRecruitByType', '/comic-time/getRecruitByType'],
			loadStatus: ['loadmore', 'loadmore', 'loadmore']
		};
	},
	components: {
		recruitList
	},
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '../release/release'
		});
	},
	methods: {
		refresh(){
			this.listData[this.current]=[]
			this.page[this.current]=1
			setTimeout(()=>{
				this.getDataList(this.current)
			},100)
			
		},
		getscroll(e){
			this.scrollTop=e.detail.scrollTop>50?true:false
		},
		// 加载更多
		loadmore(idx) {
			// console.log(idx);
			// 设置加载动画的状态
			this.status = 'loading';
		},
		// 监听底部刷新
		reachBottom() {
			this.loadStatus.splice(this.current, 1, 'loading');
			setTimeout(() => {
				this.getDataList(this.current);
			}, 1200);
		},
		// tab栏切换
		change(index) {
			this.listData=[[],[],[]]
			this.page=[1,1,1]
			this.current = index;
			this.getDataList(0)
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},

		//初始请求数据
		getDataList(idx) {
			let type = '';
			if (idx == 1) {
				type = '演员招募';
			} else if (idx == 2) {
				type = '摊位招募';
			} else {
				type = null;
			}
			this.$request(
					this.url[idx],
					{
						pageNum: this.page[idx],
						type:type
					},
					'GET'
				).then(res => {
					// console.log(res)
					if(res.code===2000){
						this.page[idx]++
						this.listData[idx].push(...res.data);
						// console.log(this.listData[idx])
						this.loadStatus.splice(this.current,1,"loadmore")
						// this.refresher=false
					}else{
						this.loadStatus.splice(this.current,1,"nomore")
					}
					
				});
			
			
			
		},
		
	},
	onLoad() {
		this.getDataList(0);
		this.getDataList(1);
		this.getDataList(2);
	},
	// 原生搜索框点击事件
	onNavigationBarSearchInputClicked() {
		uni.navigateTo({
			url: '/pages/search/search?source=zhomePage'
		});
	}
};
</script>

<style lang="scss" scoped>
	.recruit-top{
		position: fixed;
		z-index: 100;
		width: 100vw;
		border-bottom: 1rpx solid #c7c7c7;
	}
.list_con {
	background-color: #f0f3f8;
	flex-grow: 1;
	margin-top: 85rpx;
	// outline: 1px solid red;
	}
	.main{
		width: 100%;
		height: calc(100vh - var(--window-top) );
		display: flex;
		flex-direction: column;
	}
	.refresh{
		display: none;
		color: white;
		&.refresh_btn{
			display: block;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		right: 40rpx;
		bottom: 200rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba($color: #000000, $alpha: .3);
		animation: refreshanimetion 1s;
	}
	}
	@keyframes refreshanimetion{
		0%{
			transform: translateX(90rpx);
		}
		100%{
			transform: translateX(0rpx);
		}
	}
</style>
